<template>
  <div class="sureOrder">
    <!------------------------------------------------------返回导航------------------------------------------------------------------>
    <HeaderTitle :title="WebName"></HeaderTitle>
    <!-- 刷新框架 -->
    <van-pull-refresh v-model="MainLoading" @refresh="onRefresh">
      <van-row class="isAddress">
        <div class="container">
          <van-col :span="24" class="AddAddress">
            <van-button
              v-if="MyAddress==[]"
              type="default"
              size="large"
              @click="$router.push('/editaddress')"
            >+ 添加地址</van-button>
            <van-panel v-if="MyAddress!=[]" :title="MyAddress.name" :status="MyAddress.phone" class="HasAddress">
              <div>{{MyAddress.province}}{{MyAddress.city}}{{MyAddress.county}}{{MyAddress.address}}</div>
            </van-panel>
          </van-col>
        </div>
      </van-row>
      <!-- 商品列表 -->
      <div class="card-goods">
        <van-card
          v-for="item in goods"
          :key="item.id"
          :title="item.title"
          :desc="item.desc"
          :num="item.num"
          :price="item.price"
          :thumb="item.thumb"
        ></van-card>
      </div>

      <!-- 其他参数 -->
      <van-panel title="商品总额：" :status="DetailData.price" />
      <!-- <van-panel title="活动满减：" status="0" />
      <van-panel title="优惠券：" status="-12" />-->
      <van-panel title="运费：" :status="DetailData.postPrice" />
      <!-- 单选支付 -->
      <van-radio-group v-model="pay" class="payBox">
        <van-cell-group>
          <van-cell title="微信支付" clickable @click="pay = 'WeChat'">
            <van-radio slot="right-icon" name="WeChat" checked-color="#1989fa" />
          </van-cell>
          <van-cell title="支付宝支付" clickable @click="pay = 'PayTreasure'">
            <van-radio slot="right-icon" name="PayTreasure" checked-color="#1989fa" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-pull-refresh>

    <van-submit-bar
      :price="(Number(DetailData.price)+Number(DetailData.postPrice))*100"
      button-text="提交订单"
      @submit="onSubmit"
    ></van-submit-bar>
  </div>
</template>
<script>
/* ... */
import HeaderTitle from '@/components/HeaderTitle.vue'
import { NewUserOrders, getMyAddressList, getShopDetail } from '@/api/api'

export default {
  name: 'shopping',

  mixins: [],

  components: {
    HeaderTitle
  },

  props: {},

  data () {
    return {
      WebName: '确认订单',
      count: 0, // 下拉刷新次数
      MainLoading: false, // 下拉刷新
      Id: this.$route.query.id,
      pay: 'WeChat',
      DetailData: [],
      MyAddress: [],
      goods: []
    }
  },

  computed: {
    // 总额
    // totalPrice () {
    //   // 计算商品总和
    //   let totalprice = 0
    //   // 遍历拿到每一个商品对象的价格 和 数量，然后把乘积返回
    //   this.goods.forEach(a => {
    //     totalprice += a.price * a.num
    //   })
    //   return totalprice
    // }
  },

  watch: {},

  created () {
    if (localStorage.getItem('X-Auth-Token')) {
      var data = { commodityId: this.Id }
      this.GetJsonDetail(data)
      var add = { status: 1 }
      this.GetJsonAddress(add)
    } else {
      this.$toast.fail('您未曾登陆')
      this.$router.push('./login?tabs=0')
    }
  },

  mounted () {},

  destroyed () {},

  methods: {
    // 列表数据请求
    GetJsonAddress (data) {
      getMyAddressList(this.$qs.stringify(data))
        .then(res => {
          this.MyAddress = res.data.data[0]
          // console.log(res.data.data)
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 列表数据请求
    GetJsonDetail (data) {
      getShopDetail(this.$qs.stringify(data))
        .then(res => {
          // console.log(res.data.data)
          this.DetailData = res.data.data.info
          var pushl = {
            title: this.DetailData.name,
            desc: this.DetailData.detail,
            price: this.DetailData.price,
            num: 1,
            thumb: this.DetailData.banner[0]
          }
          this.goods.push(pushl)
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 下拉刷新事件
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.MainLoading = false
        this.count++
      }, 500)
    },
    onSubmit () {
      var Zprice = Number(this.DetailData.price) + Number(this.DetailData.postPrice)
      var data = { commodityId: this.Id, addressId: this.MyAddress.id, price: Zprice }
      NewUserOrders(this.$qs.stringify(data))
        .then(res => {
          // this.MyAddress = res.data.data
          console.log(res.data.code)
          if (res.data.code === 200) {
            this.$toast('Demo订单提交成功')
            this.$router.push('./myorder?type=0')
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    formatPrice (price) {
      return (price / 100).toFixed(2)
    }
  }
}
</script>

<style lang="less" >
/* ... */

.container {
  margin: 0 15px;
}
.sureOrder {
  height: 100%;
  background-color: #f6f6f6;
  .van-pull-refresh {
    height: calc(100% - 50px - 45px);
    overflow-y: auto;
    .isAddress {
      background-color: #fff;
      padding: 15px 0;
      .AddAddress {
        button {
          text-align: center;
        }
        .HasAddress{
          .van-panel__header{
            padding: 0;
          }
          .van-panel__header::after{
            border-bottom: none;
          }
          .van-panel__content{
            font-size: 12px;
            color:#666666
          }
        }
        .HasAddress::after{
          border-width: 0;
        }
      }
    }
    .card-goods {
      margin-top: 10px;
      padding: 10px 0;
      background-color: #fff;
      border-radius: 4px;
      .van-card__price {
        color: #ff7c00;
      }
    }
    .van-cell-group {
      .van-cell {
        .van-cell__value {
          color: #ff7c00;
        }
      }
    }
    .payBox {
      margin: 10px 0;
    }
  }
  // 提交订单边栏
  .van-submit-bar {
    .van-submit-bar__bar {
      .van-checkbox {
        margin-left: 10px;
      }
      .van-submit-bar__text {
        .van-submit-bar__price {
          color: #ff7c00;
        }
      }
      .van-button--danger {
        background-color: #d7b782;
        border: 0.02667rem solid #d7b782;
      }
    }
  }
}
</style>
